<template>
  <div>
    <div style="display: flex; width: 50%">
      <n-input
        v-model:value="inputValue"
        type="text"
        placeholder="输入验证码"
        style="margin-right: 10px"
      />
      <n-button
        type="primary"
        @click="emitHandle"
        :loading="isLoading"
        :disabled="disabled"
      >
        {{ codeText }}
      </n-button>
    </div>
    <div>计数:{{ clock }}</div>
  </div>
</template>

<script setup lang="ts" name="authCodeBtn">
const inputValue = ref('')
const isLoading = ref(false)
const { codeText, countDown, disabled, clock } = useAuthCode({
  seconds: 20,
  startText: '',
  changeText: 'x秒重新获取',
  endText: '重新获取',
  keepRunning: true,
  uniqueKey: '',
  timer() {
    console.log('end')
  }
})
function emitHandle(e) {
  e.preventDefault()
  isLoading.value = true
  setTimeout(() => {
    isLoading.value = false
    countDown()
  }, 3000)
}
</script>

<style scoped></style>
